import React, { useState } from "react"
import PropsTypes from 'prop-types'
import { useNavigate } from 'react-router-dom'
import { TabBar } from 'zarm'
import s from './style.module.less'
import CustomIcon from "../CustomIcon"

const NavBar = ({showNav}) => {
    const [activity, setActivity] = useState('/')
    const navigateTo = useNavigate()

    const changeTab = (path) => {
        setActivity(path)
        navigateTo(path)
    }

    return(
        <TabBar visible={showNav} className={s.tab} activeKey={activity} onChange={changeTab}>
            <TabBar.Item
                itemKey="/"
                title="账单"
                icon={<CustomIcon type="zhangdan"/>}
            />
                <TabBar.Item
                itemKey="/data"
                title="统计"
                icon={<CustomIcon type="tongji"/>}
            />
                <TabBar.Item
                itemKey="/user"
                title="我的"
                icon={<CustomIcon type="wode"/>}
            />
        </TabBar>
    )
}

NavBar.PropsTypes = {
    showNav: PropsTypes.bool
}

export default NavBar